<template>
  <div class="login">
    <section class="login-box">
      <!-- 左侧 -->
      <div class="login-left">
        <img src="@/assets/svgs/login-img.svg" alt="" class="login-img" />
      </div>
      <!-- 右侧 -->
      <div class="login-right">
        <a-form
          ref="formRef"
          size="medium"
          :model="loginForm"
          :rules="rules"
          :style="{ width: '84%' }"
          :label-col-style="{ display: 'none' }"
          :wrapper-col-style="{ flex: 1 }"
        >
          <h3 class="login-form-title">
            <span>{{ $t('common.siteName') }}</span>
          </h3>

          <a-form-item field="username">
            <a-input v-model="loginForm.username" :placeholder="$t('common.userName')" allow-clear>
              <template #prefix>
                <icon-user :stroke-width="1" :style="{ fontSize: '20px' }" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item field="password">
            <a-input-password v-model="loginForm.password" :placeholder="$t('common.passWord')" allow-clear>
              <template #prefix>
                <icon-lock :stroke-width="1" :style="{ fontSize: '20px' }" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item>
            <a-row justify="space-between" align="center" style="width: 100%">
              <a-checkbox v-model="checked">
                {{ $t('common.RememberPassword') }}
              </a-checkbox>
              <a-link>{{ $t('common.ForgotPassword') }}</a-link>
            </a-row>
          </a-form-item>

          <a-form-item>
            <a-space direction="vertical" fill style="width: 100%">
              <a-button type="primary" size="large" :loading="loading" long @click="login">
                {{ $t('common.login') }}
              </a-button>
              <a-button type="text" size="large" long class="register-btn">
                {{ $t('common.register') }}
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>
    </section>

    <ThemeBtn class="theme-btn" v-show="false" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Message, type FormInstance } from '@arco-design/web-vue'
import * as Regex from '@/utils/regexp'
import { useUserStore } from '@/stores/modules/user'
import { useRouter } from 'vue-router'
import { useLoading } from '@/hooks'

defineOptions({
  name: 'Login',
})

const userStore = useUserStore()
const router = useRouter()

const loginForm = reactive({
  username: 'admin',
  password: '123456',
})

const rules: FormInstance['rules'] = {
  username: [{ required: true, message: '请输入账号' }],
  password: [
    { required: true, message: '请输入密码' },
    { match: Regex.Password, message: '输入密码格式不正确' },
  ],
}

// 记住密码
const checked = ref(false)
// 登录加载
const { loading, setLoading } = useLoading()
const errMessage = ref('')

const FormRef = ref<FormInstance>()

// 点击登录
const login = async () => {
  try {
    const flag = FormRef.value?.validate()
    if (flag) return
    setLoading(true)
    await userStore.login(loginForm)
    const { redirect, ...othersQuery } = router.currentRoute.value.query
    router.push({
      path: (redirect as string) || '/',
      query: {
        ...othersQuery,
      },
    })
    Message.success('登录成功')
  } catch (e: any) {
    errMessage.value = e.message
  } finally {
    setLoading(false)
  }
}
</script>

<style scoped lang="scss">
.register-btn,
.register-btn:hover {
  color: var(--color-text-2);
}

.login-form-title {
  color: var(--color-text-1);
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.theme-btn {
  position: fixed;
  top: 20px;
  left: 30px;
  z-index: 9999;
}

.login {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(10deg, rgb(var(--primary-6)), rgb(var(--primary-3)));
  //background: url('@/assets/images/login_bg.webp') no-repeat;
  background-size: cover;
  //filter: brightness(0.9);

  &-box {
    width: 720px;
    height: 380px;
    display: flex;
    z-index: 999;
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
  }

  .login-left {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color: linear-gradient(60deg, rgb(var(--primary-6)), rgb(var(--primary-3)));

    .login-img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      transition: all 0.3s;
      object-fit: cover;
    }
  }

  .login-right {
    width: 270px;
    height: 100%;
    background: var(--color-bg-1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    box-sizing: border-box;
  }
}
</style>
